<template>
  <div class="lease">
    <el-card>
      <el-row :gutter="21">
        <el-col :span="4">
          <el-select v-model="value" filterable placeholder="请选择省份">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="value" filterable placeholder="请选择城市">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="value" filterable placeholder="请选择区县">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input
            v-model="queryInfo.keyword"
            @input="changeInput"
            placeholder="关键字"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <el-button type="primary" class="addBut" @click="addHouList"
        >添加</el-button
      >
    </el-card>
    <el-table :data="lease" style="width: 100%">
      <el-table-column label="序号" prop="id" width="50px"></el-table-column>
      <el-table-column
        label="小区名称"
        prop="area"
        width="120px"
      ></el-table-column>
      <el-table-column
        label="标题"
        prop="title"
        width="170px"
      ></el-table-column>
      <el-table-column label="面积" prop="price" width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}m2</span>
        </template>
      </el-table-column>
      <el-table-column label="总价" prop="allPrice" width="100px"
        ><template slot-scope="scope">
          <span>{{ scope.row.allPrice }}万</span>
        </template></el-table-column
      >
      <el-table-column label="排序" prop="sort" width="80px"></el-table-column>
      <el-table-column label="状态" width="80px">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.type"
            class="isShow"
            :active-value="'1'"
            :inactive-value="'0'"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row)">
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryInfo.pageSize"
      layout="sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="房源管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总价" :label-width="formLabelWidth">
          <el-input v-model="form.allPrice" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['lease', 'total', 'queryInfo', 'getLeaseList'],
  data () {
    return {
      options: [
        {
          value: '',
          label: ''
        }
      ],
      value: {},
      dialogFormVisible: false,
      form: {
        title: '',
        price: '',
        allPrice: '',
        area: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    Submit () {
      if (this.form.id) {
        // 编辑
        this.$http.put('/leases/edit', this.form).then((res) => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message)
            this.getLeaseList(this.queryInfo)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        // 添加
        this.$http.post('/leases/add', this.form).then((res) => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message)
            this.getLeaseList(this.queryInfo)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
      this.dialogFormVisible = false
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleEdit (row) {
      this.form = row
      this.dialogFormVisible = true
    },
    handleDelete (row) {
      this.$http.delete(`/leases/${row.id}`).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        }
        this.$message.success(res.data.message)
        this.getLeaseList(this.queryInfo)
      })
    },
    addHouList () {
      this.form = {
        title: '',
        price: '',
        allPrice: '',
        area: '',
        type: ''
      }
      this.dialogFormVisible = true
    },
    handleChange (val) {
      console.log(val)
    },
    changeSwitch (row) {
      this.$http.put('/leases/edit/type', row).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
        }
      })
    },
    handleSizeChange (newsize) {
      this.queryInfo.pageSize = newsize
      this.getLeaseList(this.queryInfo)
    },
    handleCurrentChange (current) {
      this.queryInfo.pageIndex = current
      this.getLeaseList(this.queryInfo)
    },
    changeInput () {
      this.getLeaseList(this.queryInfo)
    }
  },
  created () {
    this.getLeaseList(this.queryInfo)
  }
}
</script>

<style scoped>
.lease {
  width: 100%;
  height: 100%;
}
.addBut {
  margin: 5px 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #999;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: #169bd5;
}
.el-tabs__item.is-active {
  color: #fff;
}
</style>
